<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="../index.html" class="retu">BACK</a>
    <h1>extends扩展选项</h1>
    <hr>
    ${ message }
    <p><button @click="add1">add</button></p>
</div>

<script type="text/javascript">
    var bbb = {
        created:function(){
            console.log("我是被扩展出来的");
        },
        //如果原生方法和扩展方法重复了的话,扩展方法是不执行的
        methods: {
            add1:function () {
                console.log('我是被扩展出来的方法');
            }
        }
    }
    var app = new Vue({
        el : '#app',
        data : {
            message : 'hello vue'
        },
        methods:{
            add:function(){
                console.log('我是原生的方法');
            }
        },
        //扩展实例
        extends:bbb,
        //定义插值的符号
        delimiters: ['${','}']
    });
</script>
</body>
</html>